<template>
  <div>
    <input type="text" v-model="inpval" @keydown.enter="submit">
    <b @click="submit"></b>
    <ul>
      <li v-for="(item,index) in list" :key="index">
        <div class="box">
          <div class="con1">{{item}}</div>

        <b @click="update(index)">修改</b>
        <b @click="del(index)">删除</b>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inpval: "",
      yeslist: [], 
      list: [] 
    };
  },
  methods: {
    submit() {
      this.list.push(this.inpval);
      this.inpval = "";
    },
    update(index) {
      let val = window.prompt("请输入内容");
      this.list.splice(index, 1, val);
    },
    del(index) {
      this.list.splice(index, 1);
    }
  }
};
</script>

<style>
.dbox{
  margin: 0 auto;
}
*{
  padding: 0;
  margin: 0;
}
ul li{
  list-style: none;
}
.con1{
  background-color: yellowgreen;
  
}
b{
  background-color: pink;
}
.box{
  width: 165px;
  height: 30px;
  display: flex;
  border: 1px solid #000;
  justify-content: space-between;
  align-items: center;
}
</style>
